<!-- 参与活动的店铺展示卡片 -->
<template name='promotion-shop'>
	<view class='promotion-shop'  @click='handleClick'>
		<view class="title">
			<text class="shop-name">{{content.activity_title}}</text>
			<text class="shop-rate">{{content.star}}分</text>
		</view>
		<view class="desc gray-text">
			<text class="activity-desc">{{content.activity_description}}</text>
			<text class="delivery-way" v-if="content.deliver_type == 1 || content.deliver_type == 2 || content.deliver_type == 4 || content.deliver_type == 5" :style="'color:'+mainColor+';border:1rpx solid'+mainColor">{{content.delivery_name}}</text>
			<text class="delivery-way" v-else :style="'color:#fff'+';background:'+mainColor" >{{content.delivery_name}}</text>
		</view>
		<view class="price gray-text">
			<view>
				<text class="shop-rate normal-price">￥<text class="price-num">{{content.activity_price}}</text></text>
				<text v-if="content.delivery_name != '客户自提'">起送￥{{content.delivery_price}} | 配送￥{{content.delivery_money}}</text>
			</view>
			<view v-if="content.delivery_name != '客户自提'"><text>{{content.delivery_time + content.delivery_time_type}}</text><text v-if="content.range" style="margin-left: 10rpx;">{{' | ' + content.range}}</text></view>
		</view>
		<view class="shop-tag" v-for="(item, index) in content.activity_label" :key='item+index'>
			<text class="gray-text tag-text">{{item}}</text>
		</view>
		<view class="shop-img">
			<!-- 平铺 -->
			<view class="img-container-1" v-if="content.activity_show_type == '0'">
				<view class="container-box-1 box" v-for="(item,index) in content.activity_image">
					<image :src="item" mode='scaleToFill'></image>
				</view>
			</view>
			<!-- 一大两小 -->
			<view class="img-container-2" v-else>
			<!-- <view class="left-img-container box"> -->
				<view class="left-img-container box" :style="'background-image:url('+content.activity_image[0]+')'">
					<!-- <image :src="content.activity_image[0]" mode='scaleToFill'></image> -->
				</view>
				<view class="right-img-container box">
					<view class="right-top-img">
						<image :src="content.activity_image[1]" mode='scaleToFill'></image>
					</view>
					<view class="right-bottom-img">
						<image :src="content.activity_image[2]" mode='scaleToFill'></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'promotion-card',
	props: {
		content: {
		    type: Object,
		    default() {
		        return {
					
				};
		    }
		},
		mainColor:String,
	},
	data() {
		return {
		}
	},
	methods:{
		handleClick() {
			this.$emit('handleCardClick', this.content.url)
		}
	}
}
</script>

<style scoped>
/* .promotion-shop {
	position: relative;
	padding: 20upx 20upx 20upx 0;
	margin: 0upx 0 20upx 20upx; 
}
.promotion-shop::after{
	content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(0,0,0,.2);
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
} */

/* #promotionShop view {
	height: 24px;
	line-height: 24px;
	vertical-align: bottom;
	font-size: 12px
} */
.title,.price,.shop-tag {
	height: 24px;
	line-height: 24px;
	vertical-align: text-bottom;
	font-size: 12px;
}
.desc {
	/* height: 24px; */
	/* line-height: 24px; */
	/* vertical-align: middle; */
	font-size: 12px;
}
.price>view,.price>view>text{
	display: inline-block;
	height: 24px;
	line-height: 24px;
	vertical-align: text-bottom;
}

.title {
	display: flex;
	flex-direction: row;
	text-align: left;
}

.shop-name {
	max-width: 90%;
	font-size: 16px;
	display: inline-block;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow:ellipsis;
	font-weight: 700;
}

.shop-rate {
	color: #FB5035;
	margin-left: 10rpx;
}

.desc, .price {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.normal-price {
	margin-left: 0;
	margin-right: 20rpx;
	text-align: left;
}
.price-num{
	font-size: 16px;
	font-weight: bold;
}

.gray-text {
	color: #999999;
}

.tag-container {
}

.shop-tag {
	display: inline-block;
	margin-right: 10upx;
}

.tag-text {
	border: 1upx solid #CCCCCC;
	padding: 0upx 10upx;
	height: 16px;
	line-height: 16px;
	vertical-align: middle;
	border-radius: 8upx;
}

.shop-img {
}

.img-container-1{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 100px;
	margin-top:2vw;
}

.box {
	/* height: 100%; */
	background-color: #F7F7F7;
	border-radius: 10upx;
}

.container-box-1 {
	flex: 1;
}

.container-box-1:nth-child(3n-1){
	margin:0 2vw;
}

image {
	background-color: #F7F7F7;
	width: 100%;
	height: 100%;
	border-radius: 10upx;
}

.img-container-2 {
	margin-top: 10upx;
	display: flex;
	flex-direction: row;
}

.left-img-container {
	flex-basis: 66.7%;
	/* width: 49%; */
	height: 0;
	padding-bottom: 49.4%;
	margin-right: 5px;
	/* margin-right: 2%; */
	/* background-image: url(https://picsum.photos/200/200); */
	background-size: cover;
	background-repeat: no-repeat;
	/* background-image: url(../../static/111.png); */
}

.right-img-container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.right-top-img,.right-bottom-img {
	/* width: 100%; */
	flex: 1;
}

.right-bottom-img {
	margin-top: 5px;
}

.delivery-way {
	/* background-color: #06c1ae; */
	/* color: #ffffff; */
	border-radius: 4upx;
	padding: 4upx 6upx;
	/* color:  #06c1ae; */
	/* border: 1upx solid  #06c1ae; */
	font-size: 11px;
	/* height: 20px; */
	/* line-height: 24px; */
	/* vertical-align: middle; */
}

.activity-desc {
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}



</style>
